<!--  -->
<template>
    <div>
        <div data-tauri-drag-region class="titlebar">


            <div class="titlebar-button bg-gradient-to-br from-black to-gray-600 rounded-full " id="titlebar-refresh">
                <el-icon>
                    <Refresh />
                </el-icon>
            </div>

            <div class="titlebar-button bg-gradient-to-br from-black to-gray-600 ml-1 rounded-full" id="titlebar-minimize">
                <el-icon>
                    <Minus />
                </el-icon>
            </div>

            <div class="titlebar-button bg-gradient-to-br from-black to-gray-600 ml-1 rounded-full" id="titlebar-close">
                <el-icon>
                    <Close />
                </el-icon>
            </div>
        </div>
        <div class="map-box mt-10">
            <div id="cesiumContainer" style="height: 400px;"></div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { appWindow, WebviewWindow } from "@tauri-apps/api/window";
import { emit, listen } from '@tauri-apps/api/event'
import { getClient, ResponseType } from '@tauri-apps/api/http';

import * as Cesium from 'cesium';

export default {
    data() {
        return {
            view: null
        };
    },

    components: {},

    computed: {},

    mounted() {
        document
            .getElementById("titlebar-refresh")
            .addEventListener("click", () => window.location.reload());
        document
            .getElementById("titlebar-minimize")
            .addEventListener("click", () => appWindow.minimize());

        document
            .getElementById("titlebar-close")
            .addEventListener("click", () => appWindow.close());


        this.init();
    },

    created() { },

    methods: {
        init() {
            //初始化cesium实例

            Cesium.Ion.defaultAccessToken = import.meta.env.VITE_Cesium_defaultAccessToken;
            const viewer = new Cesium.Viewer("cesiumContainer", {

                orderIndependentTranslucency: false,
                contextOptions: {
                    webgl: {
                        alpha: true,
                    }
                },
                geocoder: true,//搜索功能
                homeButton: false, //视角恢复功能
                sceneModePicker: false, // 2d、3d切换功能
                baseLayerPicker: false, //地图底色选择功能
                navigationHelpButton: false, //帮助功能
                animation: false, //动画功能
                timeline: false, //时间线功能
                fullscreenButton: false, //全屏功能


            }
            );

            var imgLayer = new Cesium.UrlTemplateImageryProvider({
                url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
                minimumLevel: 3,
                maximumLevel: 18
            })

            viewer.imageryLayers.addImageryProvider(imgLayer);
            viewer.scene.globe.depthTestAgainstTerrain = true;
            viewer.scene.skyBox.show = false;
            viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
            viewer.scene.globe.enableLighting = false;
            viewer.shadows = false;
            viewer.scene.sun.show = false;
            viewer.scene.moon.show = false;
            viewer.scene.skyAtmosphere.show = false;
            viewer.scene.fog.enabled = false;
            var position = viewer.camera.positionCartographic;
            viewer.camera.moveForward(position.height * 0.3)


            var options = {
                camera: viewer.scene.camera,
                canvas: viewer.scene.canvas,
                screenOverlayContainer: viewer.container,
                clampToGround: true //开启贴地
            };
            viewer.dataSources.add(Cesium.KmlDataSource.load('@/assets/142974.kml', options)).then(function (dataSource) {
                viewer.clock.shouldAnimate = false;
                var rider = dataSource.entities.getById('tour');
                viewer.flyTo(rider).then(function () {
                    viewer.trackedEntity = rider;
                    viewer.selectedEntity = viewer.trackedEntity;
                    viewer.clock.multiplier = 30;
                    viewer.clock.shouldAnimate = true;
                });
            });


            let vm = this;

            //Cesium处理iframe的allow-scripts权限问题
            const iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0]; // 获取iframe dom元素
            iframe.setAttribute(
                "sandbox",
                "allow-same-origin allow-scripts allow-popups allow-forms"
            );
            iframe.setAttribute("src", "");
        },


    }
}

</script>
<style lang='scss' scoped>
:global(.cesium-viewer-bottom) {
    display: none !important;
}
</style>